<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<h1>User Register</h1>

<c:url var="usersUrl" value="/users/register"/>
<form:form modelAttribute="user" action="${usersUrl}" method="post" cssClass="inline">
    <spring:hasBindErrors name="user">
			<div class="error">
				<spring:bind path="user.*">
					<c:forEach items="${status.errorMessages}" var="error">
						<span><c:out value="${error}"/></span><br>
					</c:forEach>
				</spring:bind>
			</div>
	</spring:hasBindErrors>
	<fieldset>
		<div class="span-8">			
			
			 
			<label for="username">email:</label>
			<form:input id="username" path="username"/><br/>
			<script type="text/javascript">
				Spring.addDecoration(new Spring.ElementDecoration({
					elementId : "username",
					widgetType : "dijit.form.ValidationTextBox",
					widgetAttrs : { required : true, invalidMessage : "email is required.", 
					regExp : "^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$"  }}));
			</script>
			
			<label for="nickname">name:</label>
			<form:input id="nickname" path="nickname"/><br/>
			<script type="text/javascript">
				Spring.addDecoration(new Spring.ElementDecoration({
					elementId : "nickname",
					widgetType : "dijit.form.ValidationTextBox",
					widgetAttrs : { required : true }}));
			</script>
			
			<label for="password">password:</label>
			<form:password id="password" path="password"/><br/>
			<script type="text/javascript">
				Spring.addDecoration(new Spring.ElementDecoration({
					elementId : "password",
					widgetType : "dijit.form.ValidationTextBox",
					widgetAttrs : { 
						required : true,
						intermediateChanges : false 
					}}));
			</script>
			
			<label for="password2">confirm password:</label>
			<form:password id="password2" path="password2"/><br/>
			<script type="text/javascript">

				function confirmPassword(value, constraints) {
					var isValid = false;
					if(constraints && constraints.other) {
						var otherInput = dijit.byId(constraints.other);
						if(otherInput) {
							var otherValue = otherInput.value;
							isValid = (value == otherValue);
						}
					}
					return isValid;
				}
							
				Spring.addDecoration(new Spring.ElementDecoration({
					elementId : "password2",
					widgetType : "dijit.form.ValidationTextBox",
					widgetAttrs : {
						required : true,
						invalidMessage : "password confirm failed",
						constraints : {'other': 'password'},
						validator : this.confirmPassword,
						intermediateChanges : false
					}}));
			</script>
			<div class="chknumber">  
		       <label>kaptcha
		       <form:input id="kaptcha" path="kaptcha"/><br/>     
		       </label>  
		       <img src="<c:url value="/captcha-image"/>" width="55" height="20" id="kaptchaImage"  style="margin-bottom: -3px"/> 
		       <a href="javascript:changeImage();">reflesh</a>  
		       <script type="text/javascript" language="javascript">
				function changeImage() {
					document.getElementById("kaptchaImage").src = document.getElementById("kaptchaImage").src + '?' +Math.floor(Math.random()*100);
				}
				</script>
		     </div>  
			
		</div>
		<div class="span-3 last">
			<button id="proceed" type="submit">OK</button>
			<script type="text/javascript">
				Spring.addDecoration(new Spring.ValidateAllDecoration({elementId:'proceed', event:'onclick'}));
			</script>
		</div>		
    </fieldset>
</form:form>

